<script setup>
import { ref } from 'vue';

import { Card, TabPane, Tabs } from 'ant-design-vue';

import DataReporting from './dataReporting.vue';
import TopicList from './topicList/topicList.vue';

const props = defineProps(['device']);

const activeKey = ref('0');
</script>

<template>
  <Card class="h-full">
    <Tabs v-model:active-key="activeKey">
      <TabPane key="0" tab="数据上报" class="w-full">
        <DataReporting :device="props.device" />
      </TabPane>
      <TabPane key="1" tab="Topic 列表" class="h-full w-full overflow-hidden">
        <TopicList :device="props.device" />
      </TabPane>
    </Tabs>
  </Card>
</template>

<style lang="scss" scoped></style>
